<template>
    <div class="BaseInfo" style="width: 100%;">
        <div class="BaseInfoTable" v-if="dispalyType==='table'">
            <Table :columns="tableHead" :data="tableBody">
                <template slot-scope="{ row }" slot="custName">
                    <a @click="showContractDetial(row)">{{ row.custName }}</a>
                </template>
            </Table>
        </div>
        <div class="BaseInfoForm" v-else>
            <Form :label-width="120" disabled>
                <List>
                    <ListItem v-for="(item,index) in  tableBody" :key="index">
                        <Row type="flex" justify="center" align="middle">
                            <Col :sm="4" :md="2">
                                <div class="item-title">
                                    <span>{{item.roleType}}</span>
                                </div>
                            </Col>
                            <Col :sm="20" :md="22">
                                <Row>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="姓名" class="item-disabled">
                                            <Input v-model="item.custName" disabled />
                                        </FormItem>
                                    </Col>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="证件号码" class="item-disabled">
                                            <Input v-model="item.certNo" disabled />
                                        </FormItem>
                                    </Col>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="证件类型" class="item-disabled">
                                            <Input v-model="item.certType" disabled />
                                        </FormItem>
                                    </Col>
                                    <Col :sm="24" :md="12">
                                        <FormItem label="联系方式" class="item-disabled">
                                            <Input v-model="item.phone" disabled />
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </ListItem>
                </List>
            </Form>
        </div>
        <!-- <CustomerInfoDetial :model="model" :params="params" @closeModel="closeModel" /> -->
    </div>
</template>
<script>
import { findCustRole } from '_p/basic/api/contract/common/customer-info/customer-info'
import { getTitleFromDataDict } from "_p/basic/assets/contract/js/utils";
import { deepClone } from "@/libs/utils/ObjectClone";
import {channelType} from "_p/basic/api/contract/channel-type/channel-type";

export default {
    // 客户信息
    custName: "CustomerInfo",
    props: {
        Obj: {
            type: Object,
            require: true
        },
        dispalyType: {
            type: String,
            default: "table"
        },
        dataDict: {
            type: Object,
            default: () => { }
        },
        // 是否需要该组件的数据传给父组件
        isNeedData: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            formData: {
                startDate: "",
                endDate: "",
                founder: "",
                caseNumf: ""
            },
            tableHead: [
                {
                    title: "角色",
                    key: "roleType"
                },
                {
                    title: "姓名",
                    key: "custName"
                },
                {
                    title: "证件号码",
                    key: "certNo"
                },
                {
                    title: "证件类型",
                    key: "certType"
                },
                {
                    title: "联系方式",
                    key: "phone"
                }
            ],
            tableBody: [],
            baseData: []
        };
    },
    watch: {
        // baseData: {
        //     handler(val) {
        //         this.updateTableBody();
        //     },
        //     deep: true
        // },
        dataDict: {
            handler(val) {
                this.updateTableBody();
            },
            deep: true
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.getInfo();
        },
        getInfo() {
            if (!this.Obj && !this.Obj.contractNo) return;

            findCustRole(this.Obj.contractNo,channelType(this.$route.meta.params)).then(res => {
                if (res.code === "0000" && res.data) {
                    this.tableBody = res.data.custInfo;
                    this.updateTableBody();
                    //父组件接收数据
                    if (this.isNeedData) this.$emit("getChildrenData", res.data.custInfo)
                }
            });
        },
        updateTableBody() {
            let data = [],
                baseData = deepClone(this.tableBody);

            if (Array.isArray(baseData) && baseData.length && Object.keys(this.dataDict).length > 0) {
                baseData.forEach(ele => {
                    let c = ele.certType;
                    let e = ele.roleType;
                    if (c) ele.certType = getTitleFromDataDict(this.dataDict.certTypeDict, c) || c;
                    if (e) ele.roleType = getTitleFromDataDict(this.dataDict.PersonRoleTypeDict, e) || e;

                    data.push(ele);
                });
                this.tableBody = data;
            }
        },
    }
};
</script>
